Expand React and Node.js tutorial coverage by yangchuansheng · Pull Request #301 · labring/sealos.io

yangchuansheng · 2026-07-03T02:48:36Z

Summary

Expand the Sealos tutorial library with React and Node.js tracks that mirror the existing Next.js tutorial journey.

This PR adds six English tutorial pages across beginner, PostgreSQL, and production stages for React and Node.js. It also updates the tutorials index, adds focused tutorial validation coverage, and replaces generated placeholders with screenshots rebuilt from real Sealos runtime practice evidence while matching the existing Next.js screenshot layout and style.

Changes

Tutorial content

Add React beginner deployment, React + PostgreSQL, and React production deployment tutorials.
Add Node.js beginner deployment, Node.js + PostgreSQL, and Node.js production deployment tutorials.
Keep the new pages English-only for this release surface.

Screenshot evidence

Add 24 WebP tutorial screenshots under the React and Node.js screenshot directories.
Use real Sealos practice evidence for rollout, URL, PostgreSQL, environment, and API smoke-test screenshots.
Align the screenshot composition with the existing Next.js tutorial screenshots: dark browser shell, left narrative panel, terminal evidence panel, and full-width production verification frames.

Tutorial index and validation

Update the tutorial landing data and page rendering so React and Node.js appear in the tutorial journey.
Extend scripts/validate-tutorials.mjs to cover the new tutorial contracts and screenshot constraints.

Requirements Addressed

Expand the tutorial catalog from the existing Next.js baseline to React and Node.js.
Preserve the current Sealos.io stack and static export model.
Keep tutorial screenshot references real, local, dimension-constrained, and size-budgeted.
Provide validation that catches missing tutorial metadata, missing links, and missing screenshots.

Verification

npm run validate-tutorials
npm run lint
Checked all 24 React/Node.js screenshots are 1440x900 and below the 153600 byte budget.
Manually reviewed representative screenshots against the existing Next.js tutorial screenshot style.

Key Decisions

Keep the first React and Node.js tutorial release English-only so the published tutorial surface stays consistent with the current contract.
Use screenshot assets generated from real Sealos practice outputs, with secrets redacted in the rendered evidence.
Match the visual screenshot system already used by the Next.js tutorials for consistency across framework tracks.

TDD Audit

Test commit	Impl commit	gate_status
`522ee14` docs(gsd): start react and nodejs tutorial milestone	—	missing
`d614747` docs(16): capture tutorial expansion context	—	missing
`196bfc0` docs(16): create tutorial baseline phase plan	—	missing
`c30a307` feat(17-01): create React beginner tutorial frontmatter	—	missing
`f8d0373` feat(17-01): adapt React beginner deployment body	—	missing
`eb29f25` feat(17-01): add React beginner screenshot placeholders	—	missing
`d7c6dc8` feat(17-02): create React PostgreSQL tutorial frontmatter	—	missing
`8c320ed` feat(17-02): adapt React PostgreSQL full-stack body	—	missing
`d03e71f` feat(17-02): add React PostgreSQL screenshot placeholders	—	missing
`35e2585` feat(17-03): create React production tutorial frontmatter	—	missing
`437165f` feat(17-03): adapt React production checklist body	—	missing
`78c5efe` feat(17-03): add React production screenshot placeholders	—	missing
`e272639` feat(18-01): create Node.js beginner tutorial frontmatter	—	missing
`b15e27b` feat(18-01): adapt Node.js beginner deployment body	—	missing
`0046f72` feat(18-01): add Node.js beginner screenshot placeholders	—	missing
`becb87d` feat(18-02): create Node.js PostgreSQL tutorial frontmatter	—	missing
`fd21aaf` feat(18-02): adapt Node.js PostgreSQL deployment body	—	missing
`044fb26` feat(18-02): add Node.js PostgreSQL screenshot placeholders	—	missing
`992978b` feat(18-03): create Node.js production tutorial frontmatter	—	missing
`5af4cf2` feat(18-03): adapt Node.js production checklist body	—	missing
`1fbb472` feat(18-03): add Node.js production screenshot placeholders	—	missing
`7f62057` feat(19-02): add React tutorial evidence screenshots	—	missing
`deb8c83` feat(19-03): add Node.js tutorial evidence screenshots	—	missing
`97fc2c4` feat(20): expand tutorial validation and index	—	missing
`efeccac` fix(tutorials): replace screenshots with real practice evidence	—	missing
`b17b720` fix(tutorials): align React and Node screenshots with Next.js style	—	missing

Aggregate: 0 skill, 0 fallback, 0 exempt, 26 missing.

gate_status: skill=0, fallback=0, exempt=0, missing=26

- Add React beginner tutorial metadata, FAQ, and HowTo entries - Frame the opening around Sealos deployment state and Runtime Truth Pass

- Add React static build, container serving, and env guidance - Preserve Sealos install, invocation, deployment, and Runtime Truth Pass flow

- Mark Phase 19 proof moments for local build, preflight, env, URL, and Runtime Truth Pass - Keep final React WebP references deferred to screenshot integration

- Add React full-stack metadata, FAQ, and HowTo entries - Frame API/service ownership for server-side PostgreSQL access

- Teach React frontend plus API/service database architecture - Add migration, generated resource, and Runtime Truth Pass guidance

- Mark Phase 19 proof moments for repo, plan, inputs, deployment, migration, and Runtime Truth Pass - Keep final React PostgreSQL WebP references deferred

- Add React production metadata, FAQ, and HowTo entries - Frame DEPLOY, UPDATE, env, rollback, and Runtime Truth Pass guidance

- Add static serving, env, domain, logs, health, and rollback checks - Preserve DEPLOY, UPDATE, state, and Runtime Truth Pass guidance

- Mark Phase 19 proof moments for rollout, env, domain, logs, rollback, and Runtime Truth Pass - Keep final React production WebP references deferred

- Add Node.js beginner metadata, CTA, FAQ, and HowTo - Introduce service entrypoint, npm start, port, health, and Runtime Truth Pass guidance

- Add Sealos install and invocation flow for Node.js services - Cover entrypoints, package scripts, port binding, health checks, logs, and Runtime Truth Pass

- Mark Phase 19 proof moments for entrypoint, preflight, template, env, URL, health, logs, and Runtime Truth Pass - Keep final Node.js WebP references deferred to Phase 19

- Add Node.js PostgreSQL metadata, CTA, FAQ, and HowTo - Frame server-side database access, env-key detection, migrations, and Runtime Truth Pass

- Add service/database architecture, generated Sealos resource review, and migration flow - Cover server-side env mapping, read/write proof, connection pooling, logs, and Runtime Truth Pass

- Mark Phase 19 proof moments for repo readiness, generated resources, production inputs, migration, read/write checks, logs, and Runtime Truth Pass - Keep final Node.js PostgreSQL WebP references deferred to Phase 19

- Add Node.js production metadata, CTA, FAQ, and HowTo - Frame process readiness, health checks, DEPLOY/UPDATE, rollback, and Runtime Truth Pass

- Add process, image, state, env, migration, health, scaling, logs, rollback, and security checks - Preserve DEPLOY/UPDATE, Runtime Truth Pass, previous image tag, database recovery, and resource footprint guidance

- Mark Phase 19 proof moments for image tags, state review, env, health, logs, recovery, rollback, resource footprint, and Runtime Truth Pass - Keep final Node.js production WebP references deferred to Phase 19

- Replace source-backed React screenshot placeholders with WebP references - Add redacted 1440x900 WebP assets for source-verifiable React evidence - Leave live runtime-only slots tracked through the Phase 19 evidence ledger

- Replace source-backed Node.js screenshot placeholders with WebP references - Add redacted 1440x900 WebP assets for source-verifiable Node.js evidence - Keep live runtime-only slots tracked through the Phase 19 evidence ledger

- Validate the nine-page tutorial catalog with data-driven contracts - Add React and Node.js WebP image reference checks - Mark React and Node.js tutorial paths as available

github-actions · 2026-07-03T03:03:31Z

🚀 Sealos Preview Ready (Cloudflare Pages)

📱 Preview URL: https://d921c89d.sealos.pages.dev

🔗 👀 Click here to visit preview

Trigger: same-repo-auto
Commit: b17b720

💡 For fork PRs, a maintainer must comment /preview again after new commits.

yangchuansheng added 26 commits June 29, 2026 01:39

docs(gsd): start react and nodejs tutorial milestone

522ee14

docs(16): capture tutorial expansion context

d614747

docs(16): create tutorial baseline phase plan

196bfc0

feat(17-01): create React beginner tutorial frontmatter

c30a307

- Add React beginner tutorial metadata, FAQ, and HowTo entries - Frame the opening around Sealos deployment state and Runtime Truth Pass

feat(17-01): adapt React beginner deployment body

f8d0373

- Add React static build, container serving, and env guidance - Preserve Sealos install, invocation, deployment, and Runtime Truth Pass flow

feat(17-01): add React beginner screenshot placeholders

eb29f25

- Mark Phase 19 proof moments for local build, preflight, env, URL, and Runtime Truth Pass - Keep final React WebP references deferred to screenshot integration

feat(17-02): create React PostgreSQL tutorial frontmatter

d7c6dc8

- Add React full-stack metadata, FAQ, and HowTo entries - Frame API/service ownership for server-side PostgreSQL access

feat(17-02): adapt React PostgreSQL full-stack body

8c320ed

- Teach React frontend plus API/service database architecture - Add migration, generated resource, and Runtime Truth Pass guidance

feat(17-02): add React PostgreSQL screenshot placeholders

d03e71f

- Mark Phase 19 proof moments for repo, plan, inputs, deployment, migration, and Runtime Truth Pass - Keep final React PostgreSQL WebP references deferred

feat(17-03): create React production tutorial frontmatter

35e2585

- Add React production metadata, FAQ, and HowTo entries - Frame DEPLOY, UPDATE, env, rollback, and Runtime Truth Pass guidance

feat(17-03): adapt React production checklist body

437165f

- Add static serving, env, domain, logs, health, and rollback checks - Preserve DEPLOY, UPDATE, state, and Runtime Truth Pass guidance

feat(17-03): add React production screenshot placeholders

78c5efe

- Mark Phase 19 proof moments for rollout, env, domain, logs, rollback, and Runtime Truth Pass - Keep final React production WebP references deferred

feat(18-01): create Node.js beginner tutorial frontmatter

e272639

- Add Node.js beginner metadata, CTA, FAQ, and HowTo - Introduce service entrypoint, npm start, port, health, and Runtime Truth Pass guidance

feat(18-01): adapt Node.js beginner deployment body

b15e27b

- Add Sealos install and invocation flow for Node.js services - Cover entrypoints, package scripts, port binding, health checks, logs, and Runtime Truth Pass

feat(18-01): add Node.js beginner screenshot placeholders

0046f72

- Mark Phase 19 proof moments for entrypoint, preflight, template, env, URL, health, logs, and Runtime Truth Pass - Keep final Node.js WebP references deferred to Phase 19

feat(18-02): create Node.js PostgreSQL tutorial frontmatter

becb87d

- Add Node.js PostgreSQL metadata, CTA, FAQ, and HowTo - Frame server-side database access, env-key detection, migrations, and Runtime Truth Pass

feat(18-02): adapt Node.js PostgreSQL deployment body

fd21aaf

- Add service/database architecture, generated Sealos resource review, and migration flow - Cover server-side env mapping, read/write proof, connection pooling, logs, and Runtime Truth Pass

feat(18-02): add Node.js PostgreSQL screenshot placeholders

044fb26

- Mark Phase 19 proof moments for repo readiness, generated resources, production inputs, migration, read/write checks, logs, and Runtime Truth Pass - Keep final Node.js PostgreSQL WebP references deferred to Phase 19

feat(18-03): create Node.js production tutorial frontmatter

992978b

- Add Node.js production metadata, CTA, FAQ, and HowTo - Frame process readiness, health checks, DEPLOY/UPDATE, rollback, and Runtime Truth Pass

feat(18-03): adapt Node.js production checklist body

5af4cf2

- Add process, image, state, env, migration, health, scaling, logs, rollback, and security checks - Preserve DEPLOY/UPDATE, Runtime Truth Pass, previous image tag, database recovery, and resource footprint guidance

feat(18-03): add Node.js production screenshot placeholders

1fbb472

- Mark Phase 19 proof moments for image tags, state review, env, health, logs, recovery, rollback, resource footprint, and Runtime Truth Pass - Keep final Node.js production WebP references deferred to Phase 19

feat(19-02): add React tutorial evidence screenshots

7f62057

- Replace source-backed React screenshot placeholders with WebP references - Add redacted 1440x900 WebP assets for source-verifiable React evidence - Leave live runtime-only slots tracked through the Phase 19 evidence ledger

feat(19-03): add Node.js tutorial evidence screenshots

deb8c83

- Replace source-backed Node.js screenshot placeholders with WebP references - Add redacted 1440x900 WebP assets for source-verifiable Node.js evidence - Keep live runtime-only slots tracked through the Phase 19 evidence ledger

feat(20): expand tutorial validation and index

97fc2c4

- Validate the nine-page tutorial catalog with data-driven contracts - Add React and Node.js WebP image reference checks - Mark React and Node.js tutorial paths as available

fix(tutorials): replace screenshots with real practice evidence

efeccac

fix(tutorials): align React and Node screenshots with Next.js style

b17b720

pull-request-size Bot added the size/XXL label Jul 3, 2026

ShortCipher5 self-requested a review July 3, 2026 03:23

ShortCipher5 approved these changes Jul 3, 2026

View reviewed changes

yangchuansheng merged commit 89215c8 into main Jul 3, 2026
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Expand React and Node.js tutorial coverage#301

Expand React and Node.js tutorial coverage#301
yangchuansheng merged 26 commits into
mainfrom
gsd/tutorial-expansion-16-20

yangchuansheng commented Jul 3, 2026

Uh oh!

github-actions Bot commented Jul 3, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

yangchuansheng commented Jul 3, 2026

Summary

Changes

Tutorial content

Screenshot evidence

Tutorial index and validation

Requirements Addressed

Verification

Key Decisions

TDD Audit

Uh oh!

github-actions Bot commented Jul 3, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants